<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String prodid=request.getParameter("id"); 
String fr=request.getParameter("fr"); 

%>
<script type="text/javascript">
<!--

//-->
</script>
<style>
<!--
 	.btn_newsadd{
 		margin-left:50px;
 	}
-->
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link href="<%=path %>/resources/date/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="<%=path %>/css/bootstrap.min.css" />
<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path %>/resources/date/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<%=path %>/resources/date/bootstrap-datetimepicker.zh-CN.js"></script>

<%-- ueditor js --%>
<script type="text/javascript" charset="utf-8" src="<%=path %>/resources/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=path %>/resources/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="<%=path %>/resources/ueditor/lang/zh-cn/zh-cn.js"></script>


	<script type="text/javascript" src="<%=path %>/js/resources/plupload/plupload.full.min.js"></script>

    <jsp:include page="common.jsp"></jsp:include>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li>产品设置</li>
    <li><span id="lujing">产品添加</span></li> 
    </ul>
    </div>
    
    <div class="formbody">
    
    <div class="formtitle"><span>基本信息</span></div> 
    
    <ul class="forminfo">
    <li><label>产品名称</label><input name="name" id="name" type="text" class="dfinput" style="width:60%;" value="${prod.name }"/><i>*名称不能超过100个字符</i></li>
    <li><label>产品简述</label><input name="summary" id="summary" type="text" class="dfinput" style="width:60%;"/></li>
    <li><label>完成时间</label><input name="prodTime" id="prodTime" type="text" class="dfinput form_datetime" /><i>最晚时间为当前时间</i></li>
    <li><label>产品描述</label><br><br><br>
    	<textarea name="description" id="content" id="content" type="text" class="" style="width:90%;height:400px;"></textarea>
    </li>
    
     
    <div class="formtitle"><span>本文图片信息</span></div>
     
    <li><label>图片alt</label><input name="img.imgAlt" id="imgAlt" type="text" class="dfinput" style="width:60%;"/><i>*图片没有找到显示的文字</i></li>
    <li><label>图片链接</label><input name="img.imgHref" id="imgHref" type="text" class="dfinput" style="width:60%;"/><i>*点击图片的跳转链接</i></li>
    <li> 
    	<button id="browse" name="uploadImage" class="btn btn-warning" style="margin-left:20px;">选择图片</button> 
    	<div style="float:left;margin-left:200px; ">
    		<img alt="" src="" id="yulan" style="width:200px;height:200px;">
    	</div>
		<!--<button id="start_upload" class="btn btn-warning">开始上传</button> -->
    </li>
    
    
    <li><label>&nbsp;</label>
    	<input name="" id="news_save" type="button" class="btn btn-primary btn_newsadd" value="确认保存"/>
    	<input name="" id="news_reset" type="button" class="btn btn-primary btn_newsadd" value="重置"/>
    </li>
    </ul>
    
    </div>
    
 <script type="text/javascript" >

 var path='<%=basePath%>';
 var ue = UE.getEditor('content',{
	 imageUrlPrefix:path+'/'
 });
 var pid='<%=prodid%>';
 var fr='<%=fr%>';
 
 /* 图片上传 */
	var uploader = new plupload.Uploader({
     browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
     url : path+'/imagesAction_saveFile.action', //服务器端的上传页面地址
     filters : {
 		max_file_size : '10mb',
 		mime_types: [
 			{title : "Image files", extensions : "jpg,gif,png"}
 		]
 	},
 	multipart_params:{
 		"imgAlt":"",
 		"imgHref":""
 	}
 });  
	uploader.init();
	uploader.bind("Fileadded",function(up,f){
		previewImage(f[0],function(imgsrc){ 
			$("#yulan").attr("src",imgsrc); 
		});
	});
	
	uploader.bind("FileUploaded",function(up,f,res){
		res=eval('('+res.response+')');
		 if(pid!=null && pid!="null"){
			$.post(path+"productsAction_update.action",{
				 uuid:pid,
				 name:$("#name").val(),
				 summary:$("#summary").val(),
				 prodTime:$("#prodTime").val(),
				 newsTime:$("#newsTime").val(),
				 description:ue.getContent(),
				 "imgid":res.imgid
			 },function(result){
				 result=eval('('+result+')');
				 if(result.rescode=='100'){
					 /* $(".tip").fadeIn(500); */
					 alert("修改成功"); 
					 window.location.href="prodslist.jsp"; 
				 }else{
					 /* $(".tip").fadeIn(500); */
					 alert("修改失败");
					 window.location.href="prodslist.jsp";
				 }
			 })
		 }else{
			 $.post(path+"productsAction_save.action",{
				 name:$("#name").val(),
				 summary:$("#summary").val(),
				 prodTime:$("#prodTime").val(),
				 description:ue.getContent(),
				 "imgid":res.imgid
			 },function(result){
				 result=eval('('+result+')');
				 if(result.rescode=='100'){
					 $(".tip").fadeIn(500);
					 alert("保存成功");
					 window.location.href="prodslist.jsp";
				 }else{
					 $(".tip").fadeIn(500);
					 alert("保存失败");
					 window.location.href="prodslist.jsp";
				 }
			 })
		 }
	});
	
	
	function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
     if (!file || !/image\//.test(file.type)) return; //确保文件是图片
     if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
         var fr = new mOxie.FileReader();
         fr.onload = function () {
             callback(fr.result);
             fr.destroy();
             fr = null;
         }
         fr.readAsDataURL(file.getSource());
     } else {
         var preloader = new mOxie.Image();
         preloader.onload = function () {
             //preloader.downsize(550, 400);//先压缩一下要预览的图片,宽300，高300
             var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
             callback && callback(imgsrc); //callback传入的参数为预览图片的url
             preloader.destroy();
             preloader = null;
         };
         preloader.load(file.getSource());
     }
 }
	
 
 
 $(function(){
	if(pid!=null && pid!="null"){ // 修改
		$("#lujing").text("产品列表 > 产品修改");
		$.post(path+"productsAction_details.action",{
			"uuid":'<%=prodid%>'
		},function(result){
			result=eval('('+result+')');
			if(result.rescode=='100'){
				var prod=result.data;
				$("input[name=name]").val(prod.name);
				$("input[name=summary]").val(prod.summary);
				$("input[name=prodTime]").val(prod.prodTime); 
				$("#yulan").attr("src",path+prod.imgUrl); 
				ue.ready(function () {
			        // editor准备好之后才可以使用
					ue.setContent(prod.description); 
				});
				
			}
		}); 
	
		
		//判断是显示详情还是编辑
		
		if(fr=='show'){
			$("#lujing").text("产品列表 > 产品查看详情");
			$("input[name=name]").attr("disabled",true);
			$("input[name=summary]").attr("disabled",true);
			$("input[name=prodTime]").attr("disabled",true);
			$("input[name=name]").attr("disabled",true);
			ue.addListener("ready", function () {
		        // editor准备好之后才可以使用
				ue.setDisabled();
			});
			$("#news_save").attr("disabled",true);
			$("#news_reset").attr("disabled",true);
		}
	}else{//添加
	}
 });
 
 $(".form_datetime").datetimepicker({
		language: 'zh-CN',
		format: 'yyyy-mm-dd hh:ii',
		autoclose:true,
		endDate:new Date()
 });
 
 $("#news_save").unbind("click").bind("click",function(){
	 if(validField()){
		 
		 uploader.settings.multipart_params.imgAlt=$("#imgAlt").val();
		 uploader.settings.multipart_params.imgHref=$("#imgHref").val();
		 
		var fs=uploader.files.length;
		if(fs<=0){
			alert("请选择本文图片");
		}else{
			 // 上传图片
			 uploader.start();
		}
	 }
 });
 
 function validField(){
	 var v=$("input[name=name]").val();
	 if(!v){
		 showWarnMsg("产品名称不能为空");
		 return false;
	 }
	 if(v.length<4 || v.length>100){
		 showWarnMsg("产品名称不能少于4个字符，不能大于100个字符");
		 return false;
	 }
	 var c=ue.getContent();
	 if(!c){
		 showWarnMsg("产品描述不能为空");
		 return false;
	 } 
	 if(c.length<10 ){
		 showWarnMsg("产品描述不能少于10个字符");
		 return false;
	 }
	 return true;
 }
 
 $("input[name=name]").bind("blur",function(){
	 var v=$("input[name=name]").val();
	 if(!v){
		 showWarnMsg("产品名称不能为空");
		 return;
	 }
	 if(v.length<4 || v.length>100){
		 showWarnMsg("产品名称不能少于4个字符，不能大于100个字符");
		 return;
	 }
 });
 
 $("#news_reset").click(function(){ 
		/*jquery 没有reset 方法，使用dom 的，reset 不能重置 textarea，手动重置 textarea */
		$("input[type=text]").val('');
		ue.setContent('');
	});
 
 
 </script>